<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>蜗牛商城后台管理系统</title>
</head>
<body>
	<!-- 标题栏 -->
	<jsp:include page="header.jsp"></jsp:include>
	<!-- 导航栏 -->
	<jsp:include page="navbar.jsp"></jsp:include>
	<!-- 数据展示 -->
	<div class="col-md-10 text-center panel" id="view">
		<!-- 展示操作路径 -->
		<div class="panel-heading text-left">
			<a href="welcome.jsp">商城管理</a>-><a href="goodsManage.jsp">商品管理</a>->
			<a href="javascript:void(0)">增加商品</a>
		</div>
		<div class="panel-body">
			<form action="../goods?opr=add" method="post"
				onsubmit="return check()" enctype="multipart/form-data"
				class="form form-horizontal  col-md-push-1 col-md-10 ">
				<div class="form-group ">
					<div class="col-md-2 text-right">
						<label for="gname">商品名：</label>
					</div>
					<div class="col-md-4">
						<input type="text" name="gname" id="gname" placeholder="请输入商品名"
							onblur="checkGname()" class="form-control" />
					</div>
					<div class="col-md-6 text-left">
						<span id="gnameMsg">&nbsp;</span>
					</div>
				</div>
				<div class="form-group ">
					<div class="col-md-2 text-right">
						<label for="gprice">商品价格：</label>
					</div>
					<div class="col-md-4">
						<input type="text" name="gprice" id="gprice"
							placeholder="请输入商品价格（单位：￥）" onblur="checkGprice()"
							class="form-control" />
					</div>
					<div class="col-md-6 text-left">
						<span id="gpriceMsg">&nbsp;</span>
					</div>
				</div>
				<div class="form-group ">
					<div class="col-md-2 text-right">
						<label for="gstock">商品库存：</label>
					</div>
					<div class="col-md-4">
						<input type="text" name="gstock" id="gstock" placeholder="请输入商品库存"
							onblur="checkGstock()" class="form-control" />
					</div>
					<div class="col-md-6 text-left">
						<span id="gstockMsg">&nbsp;</span>
					</div>
				</div>
				<div class="form-group ">
					<div class="col-md-2 text-right">
						<label for="gtid">商品类型：</label>
					</div>
					<div class="col-md-4">
						<select name="gtid" id="gtid" class="form-control">

						</select>
					</div>
				</div>
				<div class="form-group ">
					<div class="col-md-2 text-right">
						<label for="gpic">商品图片：</label>
					</div>
					<div class="col-md-4">
						<input type="file" name="gpic" id="gpic" placeholder="请输入商品库存"
							onchange="checkGpic()" class="form-control" />
					</div>
					<div class="col-md-6 text-left">
						<span id="gpicMsg">&nbsp;</span>
					</div>
				</div>
				<div class="form-group ">
					<div class="col-md-2 text-right">
						<label for="gdesc">商品介绍：</label>
					</div>
					<div class="col-md-10">
						<textarea rows="5" cols="100%" name="gdesc" id="gdesc"
							class="form-control" placeholder="请输入商品介绍"></textarea>
					</div>
					<div class="col-md-6 col-md-push-2 text-left">
						<span id="gdescMsg">&nbsp;</span>
					</div>
				</div>
				<div class="form-group col-md-6">
					<button type="submit" class="btn btn-md btn-success">保存</button>
					<button type="reset" class="btn btn-md btn-warning">重置</button>
				</div>
			</form>
		</div>
	</div>
	<!-- 版权 -->
	<jsp:include page="footer.jsp"></jsp:include>
</body>

<script type="text/html" id="goodsTypeOption">
{{each goodsTypes goodsType}}
	<option value="{{goodsType.gtid}}">{{goodsType.gtname}}</option>
{{/each}}
</script>
<script type="text/javascript">
	//页面初始化
	$(document).ready(function() {
		if ("${msg}" == "ok") {
			if (!confirm("商品增加成功,是否继续增加？")) {
				location.href = "goodsManage.jsp";
			}
		} else if ("${msg}" == "null") {
			alert("请重新登录！");
			location.href = "login.jsp";
		} else if ("${msg}" != "") {
			alert("${msg}");
		}

		$.ajax({
			url : "../goodsType",
			type : "post",
			data : {
				"opr" : "findAllValid"
			},
			dataType : "json",
			success : function(result) {
				if (result.msg == "ok") {
					//创建商品类别选项
					let optionHtml = template("goodsTypeOption", {
						goodsTypes : result.list
					});
					$("#gtid").html(optionHtml);
				} else {
					alert(result.msg);
				}
			}
		})
	})

	function check() {
		return (checkGname() && checkGprice() && checkGstock() && checkGpic())
	}

	//检查商品名称长度是否超标
	function checkGname() {
		let gnameVal = $("#gname").val();
		if (parseInt(gnameVal.length) == 0) {
			$("#gnameMsg").html("<font color='red'> 商品名称不能为空</font>");
			return false;
		} else if (parseInt(gnameVal.length) < 20) {
			$("#gnameMsg").html("<font color='green'>✔</font>");
			return true;
		} else {
			$("#gnameMsg").html(
					"<font color='red'> 商品名称不能超过20个字符(当前字符数：" + gnameVal.length
							+ ")。</font>");
			return false;
		}
	}

	//检查价格格式是否正确
	function checkGprice() {
		//正则表达式：0.00~99999999.99
		let zz = /^\d{1,8}(\.\d{1,2})?$/;
		let gpriceVal = $("#gprice").val();
		if (zz.test(gpriceVal)) {
			$("#gpriceMsg").html("<font color='green'>✔</font>");
			return true;
		} else {
			$("#gpriceMsg").html("<font color='red'>价格必须是整数或两位内的小数</font>");
			return false;
		}
	}

	//检查库存格式是否正确
	function checkGstock() {
		//正则表达式：1~99999999
		let zz = /^[1-9]\d{0,7}$/;
		let gstockVal = $("#gstock").val();
		if (zz.test(gstockVal)) {
			$("#gstockMsg").html("<font color='green'>✔</font>");
			return true;
		} else {
			$("#gstockMsg").html(
					"<font color='red'>库存必须是小于100000000的正整数</font>");
			return false;
		}
	}

	//检查图片格式是否正确
	function checkGpic() {
		let zz = /(.bmp)|(.BMP)|(.gif)|(.GIF)|(.jpg)|(.JPG)|(.jpeg)|(.JPEG)|(.png)|(.PNG)$/;
		let gpicVal = $("#gpic").val();
		if (zz.test(gpicVal)) {
			$("#gpicMsg").html("<font color='green'>✔</font>");
			return true;
		} else {
			$("#gpicMsg")
					.html(
							"<font color='red'>仅支持.bmp;,gif;.jpg;.jpeg;.png格式的图片</font>");
			return false;
		}
	}
</script>
</html>
